<template>
  <el-dialog width="800px"
             :title="!dataForm.id ? '新增' : '修改'"
             :close-on-click-modal="false"
             :visible.sync="visible">
    <el-form :inline="true" class="demo-form-inline edityunfei" :model="dataForm" :rules="dataRule" ref="dataForm"
             @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-form-item label="快递渠道" prop="shippingId">
        <el-select clearable filterable v-model="dataForm.shippingId" placeholder="快递渠道">
          <el-option
            v-for="item in shipping_names"
            :key="item.shippingId"
            :label="item.shippingName"
            :value="item.shippingId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区名称" prop="shippingAreaName">
        <el-input v-model="dataForm.shippingAreaName" placeholder="地区名称"></el-input>
      </el-form-item>
      <el-form-item label="国家名称" prop="region_id" class="country">
        <el-select filterable multiple  v-model="value1" placeholder="国家名称">
          <el-option
            v-for="item in countries"
            :key="item.regionId"
            :label="item.regionName"
            :value="item.regionId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起步重量/g" prop="start_weight">
        <el-input v-model="dataForm.start_weight" placeholder="最小重量"></el-input>
      </el-form-item>
      <el-form-item label="限制重量/g" prop="top_weight">
        <el-input v-model="dataForm.top_weight" placeholder="最大重量"></el-input>
      </el-form-item>
      <el-form-item label="首重重量/g" prop="base_weight">
        <el-input v-model="dataForm.base_weight" placeholder="首重重量"></el-input>
      </el-form-item>
      <el-form-item label="续重重量/g" prop="step_weight">
        <el-input v-model="dataForm.step_weight" placeholder="续重重量"></el-input>
      </el-form-item>
      <el-form-item label="首重费用/元" prop="base_fee">
        <el-input v-model="dataForm.base_fee" placeholder="首重费用"></el-input>
      </el-form-item>
      <el-form-item label="续重费用/元" prop="step_fee">
        <el-input v-model="dataForm.step_fee" placeholder="续重费用"></el-input>
      </el-form-item>
      <el-form-item label="折扣" prop="discount">
        <el-input v-model="dataForm.discount" placeholder="折扣"></el-input>
      </el-form-item>
      <el-form-item label="时效" prop="time">
        <el-input v-model="dataForm.time" placeholder="时间"></el-input>
      </el-form-item>
      <el-form-item label="报关费/元" prop="declaration">
        <el-input v-model="dataForm.declaration" placeholder="报关费用"></el-input>
      </el-form-item>
      <el-form-item label="体积重" prop="volueme">
        <el-input v-model="dataForm.volueme" placeholder="0：无体积重，1：有体积重"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        value1: [],
        shipping_names: [],
        countries: [],
        dataForm: {
          shippingAreaId: 0,
          region_id: '',
          shippingId: '',
          shippingAreaName: '',
          configure: '',
          start_weight: '', //最小重量 g
          top_weight: '',   //最大重量 g
          base_weight: '', //首重重量 g
          step_weight: '', //续重重量 g
          base_fee: '',    //首重费用 元
          step_fee: '',    //续重费用 元
          discount: '',    //折扣
          time: '',        //时间
          declaration: '', //报关费用
          volueme: '',    //体积重
        },
        dataRule: {
          shippingAreaName: [
            {required: false, message: '地区名称不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      init(id) {
        this.dataForm.shippingAreaId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.value1=[]
          if (this.dataForm.shippingAreaId) {
            this.$http({
              url: this.$http.adornUrl(`/shipping_area/v9shippingarea/info/${this.dataForm.shippingAreaId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.shippingAreaName = data.v9ShippingArea.shippingAreaName
                this.dataForm.shippingId = data.v9ShippingArea.shippingId
                this.dataForm.configure = data.v9ShippingArea.configure
                this.shipping_names = data.shipping
                this.countries = data.countries
                this.dataForm.start_weight=data.configure.start_weight
                this.dataForm.top_weight=data.configure.top_weight
                this.dataForm.base_weight=data.configure.base_weight
                this.dataForm.step_weight=data.configure.step_weight
                this.dataForm.base_fee=data.configure.base_fee
                this.dataForm.step_fee=data.configure.step_fee
                this.dataForm.discount=data.configure.discount
                this.dataForm.time=data.configure.time
                this.dataForm.declaration=data.configure.declaration
                this.dataForm.volueme=data.configure.volueme
                let selcoun=data.selcountries
                let selcounArr=[];
                for(let i=0;i<selcoun.length;i++){
                  selcounArr.push(selcoun[i]['regionId'])
                }
                this.value1=selcounArr

              }
            })
          } else {
            this.$http({
              url: this.$http.adornUrl(`/shipping_area/v9shippingarea/getshipcountry`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.shipping_names = data.shipping
                this.countries = data.countries
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/shipping_area/v9shippingarea/${!this.dataForm.shippingAreaId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'shippingAreaId': this.dataForm.shippingAreaId || undefined,
                'shippingAreaName': this.dataForm.shippingAreaName,
                'shippingId': this.dataForm.shippingId,
                'region_id': this.dataForm.region_id,
                'start_weight': this.dataForm.start_weight, //最小重量 g
                'top_weight': this.dataForm.top_weight,   //最大重量 g
                'base_weight': this.dataForm.base_weight, //首重重量 g
                'step_weight': this.dataForm.step_weight, //续重重量 g
                'base_fee': this.dataForm.base_fee,  //首重费用 元
                'step_fee': this.dataForm.step_fee,    //续重费用 元
                'discount': this.dataForm.discount,    //折扣
                'time': this.dataForm.time,        //时间
                'declaration': this.dataForm.declaration, //报关费用
                'volueme': this.dataForm.volueme,    //体积重
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
 
<style lang="scss">
  .edityunfei .el-input {
    width: 200px;
  }
  .country  .el-input {
    width: 536px;
  }


</style>
